<template>
    <div class="page">
        <newPageHeader></newPageHeader>
        <!-- 搜索 -->
        <newSearch></newSearch>
    <shoptype ref="shoptype" :itemObj="selectItem"  @updateData="updateDataFunc"> </shoptype>

    <div class="stypeShow">


<div @click="onChangeTap(1)" :class="indexShow === 1 ? 'typeOne' : 'typeTwo'">
  推荐商品
</div>

<div @click="onChangeTap(2)" :class="indexShow === 2 ? 'typeOne' : 'typeTwo'">
  推荐商家
</div>

</div>



<ShipData ref="shipData" @updateCount="updateCountFunc"></ShipData>

        <newPageFooter></newPageFooter>
    </div>
</template>

<script>


import { mapState } from "vuex";

import shoptype from './SearchResultshoptype.vue';


import ShipData from './ShipData.vue';

import newSearch from './newSearch.vue';

import newPageHeader from '../../../components/page/engineering5188/new-page-header.vue';

import newPageFooter from '../../../components/page/engineering5188/new-page-footer.vue';

export default {
  name: "product",
  components: {
    newPageHeader,
    newPageFooter,
    newSearch,
    ShipData,
    shoptype
  },
  computed: {
    ...mapState([
      "userInfo",
    ]),
  },
  data(){
    return{
      indexShow: 1,
        selectItem:{},
        keyword: "",
    }
  },
  watch: {
    '$route.query.tabshow': {
      immediate: true, // 立即执行一次回调函数
      handler(newKeyword) {
        this.indexShow = +(newKeyword);
        if (this.$refs.shipData) {
        this.onChangeTap(this.indexShow)
        }
      }
    }
  },
  created(){
    this.keyword = this.$route.query.keyword;
  },
  mounted(){
    this.indexShow = +(this.$route.query.tabshow);
    if (this.$refs.shipData) {
    this.onChangeTap(this.indexShow)
    }
  },
  methods:{
    updateCountFunc(count){
      console.log(count, 'dededede3######')
      this.$refs.shoptype.updateCount(count)
    },
    updateDataFunc(query){
      this.$refs.shipData.updateData(query)
    },
    typeOnchange(item) {
      console.log(item,'dedede')
      this.selectItem = item;
      this.updateDataFunc({catid: item.id})
    },

    onChangeTap(num) {
      this.$refs.shipData.setData(num)
      // this.$refs.shipData.dataListShow = num
      this.$nextTick(() => {
        this.indexShow = num
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page{
    background: #fff;
}
.stypeShow {
  width: 1530px;
  height: 50px;
  margin: auto;
  display: flex;
  background: #F5F5F5;
  margin-bottom: 20px;
  margin-top: 48px;
}

.typeTwo {
  width: 335px;
  height: 53px;
  background: #F5F5F5;
  font-size: 18px;
  text-align: center;
  line-height: 53px;
  cursor: pointer;
}

.typeOne {
  width: 335px;
  height: 53px;
  background: #FFFFFF;

  border-top: 2px solid blue;
  text-align: center;
  line-height: 53px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 20px;
  color: #005FC9;

  font-style: normal;
  text-transform: none;
  cursor: pointer;

}
.company-navigate {
  width: 1530px;
  height: 60px;
  margin: auto;
  display: flex;
  align-items: center;
}

.company-navigate img {
  width: 14px;
  height: 14px;
  margin-right: 12px;
}

.Thesea {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #7b7b7b;

  font-style: normal;
  text-transform: none;
}
.companyName {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #000000;

  font-style: normal;
  text-transform: none;
}

</style>